<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import { computed } from 'vue'

interface Props {
  date: any[]
  heightData: any[]
}

const props = defineProps<Props>()

const options = computed(() => {
  return {
    title: {
      left: 'center',
      text: '植株平均高度分析',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
      formatter: '{b}<br/>平均高度: {c}cm',
    },
    xAxis: {
      type: 'category',
      data: props.date,
      axisLabel: {
        interval: 0,
      },
    },
    yAxis: {
      type: 'value',
      name: '高度(cm)',
      min: 0,
      axisLabel: {
        formatter: '{value}cm',
      },
    },
    series: [
      {
        name: '植株平均高度',
        data: props.heightData,
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#36A2EB',
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(54, 162, 235, 0.4)' },
              { offset: 1, color: 'rgba(54, 162, 235, 0)' },
            ],
          },
        },
      },
    ],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true,
    },
  }
})
</script>

<template>
  <div class="data-plant-height-analyze">
    <a-card title="植株平均高度分析" :bordered="false">
      <v-chart :option="options" style="height: 400px; width: 100%" />
    </a-card>
  </div>
</template>

<style scoped>
.data-plant-height-analyze {
  padding: 16px;
}
</style>
